<template>
  <div class="listOfQuestions">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="学科">
          <el-select v-model="formInline.user" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段">
          <el-select v-model="formInline.user" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业">
          <el-select v-model="formInline.user" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="题型">
          <el-select v-model="formInline.user" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="formInline.user" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="formInline.user" placeholder="审批人" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.user" placeholder="活动区域">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="formInline" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="标题" style="margin-right: 20px;">
          <el-input v-model="formInline.user" class="input" />
        </el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>清除</el-button>
        <el-button type="primary" @click="addTopic">+新增试题</el-button>
      </el-form>
    </el-card>
    <el-card>
      <el-table
        :data="tableData"
        class="table"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="title" label="题目" width="130">
          <template v-slot="{row}">
            <div v-html="row.title" />
          </template>
        </el-table-column>
        <el-table-column prop="subject" label="学科.阶段" />
        <el-table-column prop="type" label="题型" />
        <el-table-column prop="enterprise" label="企业" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="reads" label="访问量" />
        <el-table-column prop="" label="操作" width="150">
          <el-button type="text">编辑</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text">编辑</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="page.page"
        :page-size.sync="page.limit"
        :page-sizes="[1,5, 10, 20,50,100,200, 500]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: center;"
        @size-change="getData"
        @current-change="getData"
      />
    </el-card>
    <AddTopic ref="add" />
  </div>
</template>
<script>
import { questionList } from '@/api/listOfQuestions'
import AddTopic from './components/addTopic.vue'
export default {
  name: 'ListOfQuestions',
  components: {
    AddTopic
  },
  data() {
    return {
      total: 1,
      formInline: {
        user: ''
      },
      page: {
        page: 1,
        limit: 5
      },
      tableData: [],
      currentPage4: 10
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取题目列表方法
    getData() {
      questionList(this.page)
        .then((res) => {
          console.log('题目列表', res)
          this.tableData = res.data.items
          // 保存总条数
          this.total = res.data.pagination.total
        })
    },
    // 点击新增题目按钮的处理函数
    addTopic() {
      // this.$refs.add.isShow = true
      questionList({
        page: 1,
        limit: 10,
        title: '123'
      })
        .then((res) => {
          console.log('题目列表', res)
          this.tableData = res.data.items
          // 保存总条数
          this.total = res.data.pagination.total
        })
    }
  }

}
</script>

<style lang="scss" scoped>

.listOfQuestions{
  margin: 15px;
  .table{
      margin-bottom: 20px;
    }
  .box-card{
    padding-left: 50px;
    margin-bottom: 10px;
    ::v-deep .el-input{
      width: 170px;
    }
    .input{
      width: 430px;
    }
  }
  .el-form-item{
    margin-right: 50px;
  }

}
</style>
